<template>
    <div v-if="isOpen" class="context-menu" :style="{ left: pos.x + 'px', top: pos.y + 'px' }">
        <div class="menu-item" @click="execute('remove')">
            <span class="icon">📋</span>
            <span>移除记录</span>
        </div>
        <div class="menu-item" @click="execute('delete')">
            <span class="icon">📌</span>
            <span>删除本地文件</span>
        </div>
        <div class="menu-item" @click="execute('rename')">
            <span class="icon">🗑️</span>
            <span>重命名本地文件</span>
        </div>
        <div class="menu-item" @click="execute('close')">
            <span class="icon">🔄</span>
            <span>关闭弹窗</span>
        </div>
    </div>
</template>

<script setup>
const emit = defineEmits(['menuClick'])
const props = defineProps(['pos', 'isOpen', 'fileRecord'])
const execute = (action) => {
    emit('menuClick', { action, record: props.fileRecord })
}


</script>

<style scoped>

.context-menu {
    position: fixed;
    background: white;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 120px;
    padding: 4px 0;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.menu-item:hover {
    background-color: #0078d4;
}

.menu-item .icon {
    margin-right: 8px;
    font-size: 14px;
}

.menu-item span {
    font-size: 13px;
    color: #333;
}
</style>
